<script setup lang="ts">
interface Props {
  qipu: number[][];
  showTip: boolean;
  active?: any;
  size?: number;
}
const props = withDefaults(defineProps<Props>(), {
  showTip: true,
  size: 25,
});
const emits = defineEmits(["change"]);
const handleClickXq = (x, y) => {
  emits("change", `${zimubiao[x].toLocaleUpperCase()}${y}`);
};
function generateArray() {
  let arrGenerate = [];
  for (var i = 0; i < 26; i++) {
    var letter = String.fromCharCode(97 + i);
    arrGenerate.push(letter);
  }
  return arrGenerate;
}

const zimubiao = generateArray();

const tdStyle = computed(() => {
  const winWidth = window.innerWidth || 375;
  let size = props.size;
  if (winWidth < 400) {
    size = 20;
  }

  return {
    width: size + "px",
    height: size + "px",
  };
});
</script>

<template>
  <table class="qp-table">
    <tr v-for="(st, index) in qipu">
      <td
        v-for="(sts, index1) in st"
        @click="handleClickXq(index, index1)"
        :class="active && active.x == index && active.y == index1 ? 'active' : ''"
        :style="tdStyle"
      >
        <span v-if="sts === 0"> </span>
        <span v-else-if="sts == 1" class="heizi qizi"> </span>
        <span v-else-if="sts == 2" class="baizi qizi"> </span>
        <span class="tip1" v-if="showTip && sts === 0">
          {{ zimubiao[index].toLocaleUpperCase() }}{{ index1 }}
        </span>
        <!-- <span class="tip2" v-if="showTip"> {{  }} </span> -->
      </td>
    </tr>
  </table>
</template>

<style lang="scss" scoped>
.qp-table {
  $color: #444;
  line-height: 1;
  border-spacing: 0;
  border-collapse: separate;
  border-right: 1px solid $color;
  border-bottom: 1px solid $color;
  td {
    $w: 25px;
    width: $w;
    height: $w;
    text-align: center;
    border: 1px solid $color;
    border-right: none;
    border-bottom: none;
    font-size: 12px;
    position: relative;
    > * {
      position: relative;
      z-index: 9;
    }
    &.active {
      background-color: rgba($color: red, $alpha: 0.3);
    }
  }
}

.qizi {
  $w: 12px;
  background-color: red;
  width: $w;
  display: inline-block;
  height: $w;
  border-radius: 50%;

  &.baizi {
    background-color: #fff;
    box-shadow: 0 0 5px #000, 0 0 5px #999 inset;
  }
  &.heizi {
    background-color: #000;
    box-shadow: 0 0 5px #fff, 0 0 2px #fff inset;
  }
}
.tip1 {
  position: absolute !important;
  z-index: 3 !important;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8);

  color: #555;
  font-size: 12px;
}
.tip2 {
  position: absolute !important;
  z-index: 3 !important;
  left: 50%;
  bottom: 100%;
  transform: translate(-50%, -10px);

  color: #888;
}
</style>
